<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col items-center text-wrapper" style="background-color: #fff2df;">
				<text class="text_1">其他品类商品需要返回主页继续询价</text>
			</view>
			<scroll-view scroll-y="true" class="scroll" style="z-index: 1;">
				<view class="flex-row section_1">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826977656793124.png"
						class="image_1" />
					<text class="text_2">{{item.brandName}}</text>
				</view>
				<view class="flex-col group_1">
					<view class="flex-col ">
						<view class="flex-col section_2 u-m-t-20">
							<view class="flex-row group_8">
								<text class="text_19">产品名称</text>
								<view class="text_4" style="width:220px ">
									<u-input border="none" placeholder="请输入产品名称" maxlength="30" clean
										v-model="item.productName"></u-input>
								</view>
							</view>

							<view class="flex-col group_9">
								<view class="flex-row group_4">
									<text class="text_5">上传资料</text>
									<!-- <text class="text_7">产品图片</text> -->
									<u-radio-group v-model="item.choiceId" size="36"   iconSize="25"  style="margin-left: 39rpx;">
										<u-radio :customStyle="{marginRight: '18px'}"
											v-for="(item, index) in radiolist1" :key="index" :label="item.name"  labelSize="30"
											:name="item.value">
										</u-radio>
									</u-radio-group>

								</view>
								<view class="flex-row group_6" v-if="item.choiceId==0">
									<text class="text_11">产品图片</text>
									<view class="u-m-l-20">
										<shop-upload :fileList="item.detailedPictures" @success="success" @del="delpic">
										</shop-upload>
									</view>

								</view>
								<view class="flex-row group_8" v-if="item.choiceId==1">
									<text class="text_19">规格</text>
									<view class="text_4" style="width:220px ">
										<u-input border="none" placeholder="请输入规格" maxlength="30" clean
											v-model="item.specificationsId"></u-input>
									</view>
								</view>
								<view class="flex-row group_8" v-if="item.choiceId==1">
									<text class="text_19">型号</text>
									<view class="text_4" style="width:220px ">
										<u-input border="none" placeholder="请输入型号" maxlength="30" clean
											v-model="item.materialModelId"></u-input>
									</view>
								</view>
								<text class="text_13">备注</text>

								<view class="flex-col u-m-t-20">
									<!-- <textarea height="40" v-model="item.remarks" placeholder="请输入备注" placeholder-style="background:#F5F6F8; " /> -->
									<u-textarea height="150" confirmType="done" v-model="item.remarks"
										placeholder="请输入备注" ref="textarea"></u-textarea>
								</view>

								<text class="text_17">请清晰展示规格型号或填入产品名称、规格、型号。</text>
							</view>
						</view>
						<view class="flex-col group_10">

							<view class="flex-col items-center button" @click="submit"><text class="text_29">确认</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import _ from "lodash"
	export default {
		components: {},
		onLoad(option) {
			if (option.hasOwnProperty('index') && option.hasOwnProperty('i') && option.hasOwnProperty('li')) {
				let list = uni.getStorageSync('detailedLists');
				this.item = list[option.index].brand[option.i].list[option.li];
				this.index = option.index;
				this.i = option.i;
				this.li = option.li;
				let pic = [];
				this.item.detailedPictures.map(it => {

					pic.push({
						url: it.detailedPictureUrl ? it.detailedPictureUrl : it.url
					})
				})
				this.item.detailedPictures = pic;


			}
		},
		data() {
			return {
				index: '',
				i: '',
				li: '',
				item: {},
				fileList: [],
				radiolist1: [{
						name: '产品规格',
						value: 0
					},
					{
						name: '规格、型号',
						value: 1
					},
				]
			}
		},
		methods: {
			success(file) {

				this.item.detailedPictures.push({
					url: file.url
				});
				console.log(this.item.detailedPictures);

			},
			delpic(index) {

				this.item.detailedPictures.splice(index, 1)


			},
			submit() {

				let lists = uni.getStorageSync('detailedLists');
				lists[this.index].brand[this.i].list[this.li] = this.item;
				uni.setStorageSync('detailedLists', lists)
			   uni.navigateBack({
			   	delta: 1
			   });
				
			}
		},
	};
</script>

<style scoped lang="scss">
	.scroll {
		height: calc(100vh - 170rpx);
	}

	::v-deep uni-textarea {
		width: 100%;
	}

	.section_2 {
		padding: 0 11.5px;
		background-color: #ffffff;
		border-radius: 8px;
		position: relative;
	}

	.group_4 {
		padding: 15px 0 18px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_6 {
		padding: 15px 0 16px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.text-wrapper_1 {
		margin-top: 16.5px;
		padding: 11px 0 49px;
		background-color: #f6f7f9;
		border-radius: 8px;
	}

	.image_5 {
		margin-left: 19.5px;
		margin-top: 3px;
		border-radius: 8px;
		width: 78px;
		height: 78px;
	}

	.image-wrapper {
		margin-left: 12px;
		margin-top: 3px;
		padding: 23.25px 0;
		border-radius: 8px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826983491283699.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 78px;
		height: 78px;
	}

	.image_3 {
		margin-top: 3px;
		flex-shrink: 0;
		border-radius: 50%;
		width: 16px;
		height: 16px;
	}

	.image_7 {
		width: 31.5px;
		height: 31.5px;
	}

	.text_11 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_13 {
		margin-top: 15px;
		align-self: flex-start;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_17 {
		margin-top: 10.5px;
		align-self: flex-start;
		color: #ff371d;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	.text_5 {
		margin-bottom: 2.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_7 {
		margin-left: 43.5px;
		margin-bottom: 2.5px;
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_5 {
		margin-left: 31.5px;
	}

	.text_15 {
		margin-left: 12px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_9 {
		margin-left: 8px;
		margin-bottom: 2.5px;
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.page {
		background-color: #f6f7f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 95vh;
	}

	.group {
		flex: 1 1 auto;
	}

	.text-wrapper {
		padding: 8.5px 0 13.5px;
		background-color: #ffffffff;
	}

	.section_1 {
		padding: 16px 16px;
		background-color: #ffffffff;
	}

	.group_1 {
		padding: 12px 12px 0;
	}

	.text_1 {
		color: #ff9d00;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		letter-spacing: 0.6px;
	}

	.image_1 {
		border-radius: 30px;
		width: 40px;
		height: 40px;
	}

	.text_2 {
		margin-left: 12px;
		margin-top: 9px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_7 {
		padding-top: 16.5px;
	}

	.image_2 {
		width: 24px;
		height: 20px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.group_2 {
		padding: 21.5px 0 20.5px;
		border-bottom: solid 0.5px #eeeeee;
		position: relative;
	}

	.group_3 {
		padding-bottom: 13px;
		position: relative;
	}

	.group_10 {
		padding: 16px 0 20px 4px;
	}

	.text_3 {
		display: flex;
		align-self: center;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		/* line-height: 16.5px; */
	}

	.text_4 {
		margin-left: 19.5px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_8 {
		padding: 15px 0 20.5px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.image_9 {
		border-radius: 0px 8px 0px 8px;
		width: 24px;
		height: 20px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.group_9 {
		padding-bottom: 19.5px;
		position: relative;
	}

	.text-wrapper_2 {
		padding: 13rpx 23rpx;
		align-self: flex-end;
		border-radius: 22px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826986389174400.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100px;
	}

	.button {

		margin-top: 120rpx;
		bottom: 120rpx;
		width: 686rpx;
		height: 88rpx;
		background-color: #1d6aff;
		border-radius: 22px;
	}

	.text_19 {
		display: flex;
		align-self: center;
		color: #333333;
		font-size: 14px;
	}

	.text_20 {
		margin-left: 19.5px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_28 {
		color: #1d6aff;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';

	}

	.text_29 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}
</style>
